<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>注册 - 有间工作室</title>
	<meta author="zrong.me 曾荣">
	<link rel="stylesheet" type="text/css" href="/static/index/style/register-login.css">
	<link rel="stylesheet" type="text/css" href="/static/index/css/jigsaw.css">
	<link rel="stylesheet" type="text/css" href="/static/index/css/youjian.css">
	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script src="/static/index/js/vector.js"></script>
	<script>
		$(function () {
			var victor = new Victor("container", "output")
		})
	</script>
</head>

<body id="container">
	<div id="output">
		<div class="cent-box-header">
			<h1 class="main-title hide">有间</h1>
		</div>
		<div class="cent-box register-box">
			<div class="cont-main clearfix">
				<div class="index-tab">
					<div class="index-slide-nav">
						<a href="{{ url_for('.login') }}">登录</a>
						<a href="{{ url_for('.register') }}" class="active">注册</a>
						<div class="slide-bar slide-bar1"></div>
					</div>
				</div>

				<div class="login form">
					<div class="group">
						<div class="group-ipt email">
							<input type="email" name="mobile" id="mobile" class="ipt" placeholder="输入您的手机号" required>
						</div>
						<div class="group-ipt user">
							<input type="text" name="user" id="user" class="ipt" placeholder="输入您的用户名" required>
						</div>
						<div class="group-ipt password">
							<input type="password" name="password" id="password" class="ipt" placeholder="设置登录密码"
								required>
						</div>
						<div class="group-ipt password1">
							<input type="password" name="password1" id="password1" class="ipt" placeholder="重复密码"
								required>
						</div>

						<div class="group-ipt verify">
							<input type="text" name="mobile_verify" id="mobile_verify" class="ipt" placeholder="输入验证码" required>
							<button class="imgcode verify-btn" onclick="sendSMSCode()">获取验证码</button>
						</div>

						<div class="group-ipt container" id="captcha" style="position: relative"></div>
					</div>
				</div>
				<div class="button">
					<button type="submit" class="login-btn register-btn" id="button">注 册</button>
				</div>
			</div>
		</div>
	</div>
	<!-- <script src='/static/index/js/particles.js' type="text/javascript"></script> -->
	<script src='/static/index/js/background.js' type="text/javascript"></script>
	<script src='/static/index/js/jquery.min.js' type="text/javascript"></script>
	<script src='/static/index/js/layer/layer.js' type="text/javascript"></script>
	<script src='/static/index/js/index.js' type="text/javascript"></script>
	<script src='/static/index/js/jigsaw.js' type="text/javascript"></script>
	<script>
		function sendSMSCode(){

			// 校验参数，保证输入框有数据填写
			$(".imgcode").removeAttr("onclick");
			var mobile = $("#mobile").val();
			if (!mobile) {
				layer.msg("未填写手机号！")
				$(".imgcode").attr("onclick", "sendSMSCode();");
				return;
			}
			var mobile = $('#mobile').val();
			var params = {
				"mobile": mobile,
			};

			$.ajax({
			// 请求地址
			url: "{{ url_for('passport_blue.send_sms_code') }}",
			// 请求方式
			method: "POST",
			// 请求内容
			data: JSON.stringify(params),
			// 请求内容的数据类型
			contentType: "application/json",
			// 响应数据的格式
			dataType: "json",
			success: function (resp) {
				if (resp.errno == "0") {
					layer.msg(resp.errmsg)
					// 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
					var num = 60;
					// 设置一个计时器
					var t = setInterval(function () {
						if (num == 1) {
							// 如果计时器到最后, 清除计时器对象
							clearInterval(t);
							// 将点击获取验证码的按钮展示的文本回复成原始文本
							$(".imgcode").html("获取验证码");
							// 将点击按钮的onclick事件函数恢复回去
							$(".imgcode").attr("onclick", "sendSMSCode();");
						} else {
							num -= 1;
							// 展示倒计时信息
							$(".imgcode").html(num + "秒");
						}
					}, 1000)
				} else {
					// 表示后端出现了错误，可以将错误信息展示到前端页面中

					layer.msg(resp.errmsg)


					// 将点击按钮的onclick事件函数恢复回去
					$(".imgcode").attr("onclick", "sendSMSCode();");
					// 如果错误码是4004，代表验证码错误，重新生成验证码
					if (resp.errno == "4004") {
						generateImageCode()
					}
				}
			}
		})
	}



		verify = ""
		jigsaw.init(document.getElementById('captcha'), function () {
			verify = "success";
			layer.msg("验证成功")
		}, function () {
			verify = "loser";
			layer.msg("验证失败")
		})

		$(".login-btn").click(function () {
			var mobile = $("#mobile").val();
			var user_name = $("#user").val();
			var password = $("#password").val();
			var password1 = $("#password1").val();
			var mobile_verify = $('#mobile_verify').val()
			$.ajax({
				url: "{{url_for('.register')}}",
				type: 'post',
				data: {
					'mobile': mobile,
					'user_name': user_name,
					'password1': password1,
					'password': password,
					'verify': verify,
					'mobile_verify': mobile_verify,
				},
				success: function (data) {
					errno = data.errno;
					errmsg = data.errmsg;
					layer.msg(errmsg);
					if (errno == 0) {
						setTimeout(function () {
							window.location.href = "{{url_for('.login')}}"
						}, "1500");
					}

				}

			})
		})
		$("#remember-me").click(function () {
			var n = document.getElementById("remember-me").checked;
			if (n) {
				$(".zt").show();
			} else {
				$(".zt").hide();
			}
		})


	</script>
</body>

</html>